<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/base.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
* {
    padding: 0;
    margin: 0;
}

header {
    width: 1366px;
    height: 54px;
    margin: 0 auto;

    background: url(../img/logo.png) no-repeat 24px center;
    background-size: 113px 27px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header div:nth-child(1) {
    width: 432px;
    height: 54px;
    margin-left: 175px;
    font-size: 12px;
    color: #CCCCCC;
}

header div:nth-child(1) ul {
    width: 432px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

header div:nth-child(1) ul li {
    width: 20%;
    font-size: 16px;

}

header .form {
    width: 180px;
    height: 27px;
    margin-right: 23px;
    display: flex;

}

header .form input {
    width: 50px;
    height: 100%;
    margin-right: 10px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    font-size: 12px;
}

header .form .btn {
    background: url(../img/search.png) no-repeat center center;
    border: 0;

}


        #dalor {
            width: 400px;
            height: 400px;
            position: relative;
            margin-top: 200px;
            margin-left: -200px;
            top: 50%;
            left: 50%;
        }

        #dalor div {
            position: absolute;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }

        #dalor_go {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 100px;
            left: 100px;
            line-height: 200px;
            background: red;
            color: white;
            text-align: center;
            border: none;
            cursor: pointer;
        }

        .dalor1 {
            top: 0;
            left: 0;
            background: #FF9999;
        }

        .dalor2 {
            top: 0;
            left: 100px;
            background: #CDCD66;
        }

        .dalor3 {
            top: 0;
            left: 200px;
            background: #FF9999;
        }

        .dalor4 {
            top: 0;
            left: 300px;
            background: #CDCD66;
        }

        .dalor5 {
            top: 100px;
            left: 300px;
            background: #FF9999;
        }

        .dalor6 {
            top: 200px;
            left: 300px;
            background: #CDCD66;
        }

        .dalor7 {
            top: 300px;
            left: 300px;
            background: #FF9999;
        }

        .dalor8 {
            top: 300px;
            left: 200px;
            background: #CDCD66;
        }

        .dalor9 {
            top: 300px;
            left: 100px;
            background: #FF9999;
        }

        .dalor10 {
            top: 300px;
            left: 0;
            background: #CDCD66;
        }

        .dalor11 {
            top: 200px;
            left: 0;
            background: #FF9999;
        }

        .dalor12 {
            top: 100px;
            left: 0;
            background: #CDCD66;
        }

        .blue {
            background: #40FFE5;
        }
        footer div{
            position: fixed;
            left: 50%;
            bottom: 200px;
            font-size: 18px;
            margin-top: 40px;
           
        }
        h1{
            margin-left: 500px;
        }
    </style>
</head>

<body>
    <header>
		<div>
			<ul>
				<li><a href="../index.html">首页</a></li>
				<li><a href="">课程</a></li>
				<li><a href="./test.html">课堂测试</a></li>
				<li><a href="./release.html">发布留言</a></li>
				<li><a href="./random.html">抽奖活动</a></li>

			</ul>

		</div>
		<div class="form">
			<input type="button" class="btn" />
			<a href="./logon.html">登录</a>
			<a href="./post.html" style="margin-left: 15px;">注册</a>
		</div>

	</header>
       <h1></h1>
    <div id="dalor">
        <input id="dalor_go" type="button" value="开始">
        <div class="dalor1 blue">100分</div>
        <div class="dalor2">很遗憾</div>
        <div class="dalor3">90分</div>
        <div class="dalor4">40分</div>
        <div class="dalor5">加油，继续努力</div>
        <div class="dalor6">不及格</div>
        <div class="dalor7">二等奖</div>
        <div class="dalor8">老师辛苦了</div>
        <div class="dalor9">99，还差一点</div>
        <div class="dalor10">熊猫一个</div>
        <div class="dalor11">很遗憾</div>
        <div class="dalor12">加油，继续努力</div>
    </div>
      <footer>
          
          <div></div>
      </footer>
    <script>
        //    抽奖逻辑
        var odar = document.getElementById("dalor").getElementsByTagName("div");
        var Go = document.getElementById("dalor_go");
        var main = 0;
        var clear = null
        Go.addEventListener("click", function () {
            document.querySelector("h1").innerHTML="抽奖中......"
            // 点之前清除定时器，因为它每点一次会累加
            clearInterval(clear);
            var odartime = Math.ceil(Math.random() * 24 + 24);
            clear = setInterval(function () {
                odar[main % 12].classList.remove("blue");
                odar[(++main) % 12].classList.add("blue");
                if (main % odartime == 0) {
                //   停止和出现结果
                   document.querySelector("footer div").innerHTML='<a href="../index.html">运气太好了，点我回去兑奖！</a>'
                    clearInterval(clear);
                }
            }, 70);
        });
    </script>
</body>

</html>